<template>
  <p class="flex">
    <span @click="goBack" class="return">
      <i class="MC_iconfont MC_icon-fangxiang-zuo-xian"></i>
      <span class="left-space">{{ props.backTitle }}</span>
    </span>
    <span class="title">{{ props.title }}</span>
  </p>
</template>
<script lang="ts" setup>
import { throttle } from 'lodash'
import { defineProps, withDefaults } from 'vue'
import { useRouter } from 'vue-router'
/**
 * 返回按钮
 */
interface Props {
  title: string
  backTitle: string
  back?: () => void
}
const props = withDefaults(defineProps<Props>(), {
  title: '',
  backTitle: '返回'
})

const router = useRouter()

const goBack = throttle(() => {
  if (props.back) {
    return props.back()
  }
  router.back()
})
</script>
<style scoped lang="stylus">
.flex
  display flex
  font-size 14px
  justify-content unset !important
  align-items center
  i
   color rgba(0, 0, 0, 0.26)
.return
  display: inline-block;
  height: 14px;
  border-right: 1.5px solid #dcdcdc;
  display: flex;
  align-items: center;
  cursor pointer
  i
    color rgba(0, 0, 0, 0.6)
    font-size: 22px;
    margin-left: -7px;
  span
    color rgba(0, 0, 0, 0.88)
    margin-right: 16px;
.left-space
  margin-left 8px
  cursor pointer
.title
  color rgba(0, 0, 0, 0.6)
  margin-left 16px
</style>
